Vanilla Form Manual v. 1.2

Vanilla Form - Troubleshooting

How to deal with Timeout Error

Vanilla Form sends asynchronous requests to mailing server (PHP file) with filled form data. If response from mailing server will not came back to Vanilla Form in less then 5 seconds timeout error is raised. It doesn't mean, that e-mail was not send by PHP file. It means, that form doesn't receive response or it came back to it too late. This error can sometimes occur because of delays in web server or periodical connection lost. If you would like to extend or change this time for some reason you can do it during initialization the form. Check following example:


    document.addEventListener("DOMContentLoaded", function () {
        var myForm;
        myForm = new VanillaForm(document.querySelector("form.vanilla"));
        // Response timeout setting is a number of milliseconds
        myForm.responseTimeout = 7000; // 7000 milliseconds is equal to 7 seconds
    });

Positioning SEND button

Default position of SEND button is center. If you would like to move SEND button to left or right, you need to update your HTML markup with proper CSS class.

Take a look for the following code snippet for center positioning (default):


    <div class="column-100 center">
        <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
    </div>

Take a look for the following code snippet for left positioning:


    <div class="column-100 left">
      <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
    </div>

Take a look for the following code snippet for right positioning:


    <div class="column-100 right">
      <input type="submit" value="Send" data-error="Fix errors" data-processing="Sending..." data-success="Thank you!">
    </div>

Loss form styling

If your form loss styling double check following bullet points:

Receiving “Your message was marked as SPAM and was not sent”

It means that security token doesn't match. Double check if you have following lines in PHP file:


    // This field is special, and it's used for anti bot protection.
    $contact_secret = filter_input(INPUT_POST, 'contact_secret', FILTER_SANITIZE_STRING);

    // Decode secret
    $contact_secret = strrev($contact_secret);

Receiving “Response from mailing server was unclear. Please contact administrator” error

This e-mail means that PHP responses unclear. To investigate this error, check following bullet points:

Sometimes PHP file contains some syntax errors (often made during customization). Copy & paste whole PHP content to this online tool and click analyze. It should help you finding syntax errors.

How do you protect against spam bots?

Vanilla form uses two level spam bot protect. First one is secret token, which is send by form in hidden field (hidden field is automatically created by JS script. Secret token is checked in PHP file, if it doesn't match NO_SPAM code is returned.

Second level bases on weakness of many spam bots. Spam bots analyzes code and structure of form, but they don't fire focus events. In normal usage, to type something or edit field content you need to focus it before. When you clicking or pressing tab key focused field will change border color. When field will be focused JS script notice that, otherwise you will receive proper alert message.

My form is zoomed out and tiny on my smartphone

Please make sure, that your head section includes following line:


    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


I experience "Mail server has experienced an error"

This error reports, that there is something wrong on server side. Please ask your hosting administrator to check that if mail() function in PHP parser is configured properly.